<template>
	<div class="system-add-dept-container">
		<el-drawer title="修改部门表" v-model="showWindows" @close="onCancel">
			<el-form ref="formRef" :model="sysOrg" :rules="rules" size="small" label-width="30%" style="width: 90%">
				<el-form-item label="名称" prop="label">
					<el-input v-model="sysOrg.label" placeholder="请输入名称" />
				</el-form-item>
				<el-form-item label="父级部门" prop="parentId">
					<el-cascader
						style="width: 100%"
						clearable
						:show-all-levels="false"
						separator="-"
						:props="{ lazy: true, lazyLoad: lazyLoadDeptTree, value: 'orgId', checkStrictly: true }"
						:options="deptTree"
						v-model="sysOrg.treePath"
					/>
				</el-form-item>
				<el-form-item label="排序，越小越靠前" prop="sortValue">
					<el-input v-model="sysOrg.sortValue" placeholder="请输入排序，越小越靠前" />
				</el-form-item>
			</el-form>
			<div class="el-drawer__footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { editSysOrg, getSysOrgInfo, getSysOrgListByParentId } from '/@/api/organized/dept/index';
import { ElMessage } from 'element-plus';

export default {
	name: 'editSysOrg',
	emits: ['initTableData'],
	props: {},
	setup: function (props, context) {
		const formRef = ref();

		const state = reactive({
			showWindows: false,
			sysOrg: {
				label: '',
				parentId: '',
				treePath: [],
				sortValue: '',
			},
			orgId: '',
			rules: {
				label: [{ required: true, message: '请输入名称', trigger: 'blue' }],
				parentId: [{ required: true, message: '请输入父ID', trigger: 'blue' }],
				treePath: [{ required: true, message: '请输入树结构', trigger: 'blue' }],
				sortValue: [{ required: true, message: '请输入排序，越小越靠前', trigger: 'blue' }],
			},
			deptTree: [],
		});

		const initDeptTree = async () => {
			getSysOrgListByParentId({}).then((res: any) => {
				state.deptTree = res.data;
			});
		};

		const lazyLoadDeptTree = (node: any, resolve: any) => {
			getSysOrgListByParentId({ parentId: node.data.orgId }).then((res: any) => {
				resolve(res.data);
			});
		};

		//打开添加窗口
		const openWindows = async (orgId: any) => {
			state.orgId = orgId;
			getSysOrgInfo(orgId).then((res: any) => {
				state.sysOrg = res.data;
				state.sysOrg.treePath = state.sysOrg.treePath.slice(0, state.sysOrg.treePath.length - 1);
			});
			state.showWindows = true;
		};

		//取消
		const onCancel = () => {
			state.deptTree = [];
			state.sysOrg.parentId = '';
			formRef.value.resetFields();
			state.showWindows = false;
		};

		onMounted(() => {
			initDeptTree();
		});

		//提交
		const onSubmit = () => {
			state.sysOrg.parentId = state.sysOrg.treePath[state.sysOrg.treePath.length - 1];
			state.sysOrg.treePath.push(state.orgId);
			formRef.value.validate((valid: any) => {
				if (valid) {
					editSysOrg(state.sysOrg, state.orgId).then((res: any) => {
						if (res.code == 200) {
							onCancel();
							context.emit('initTableData');
						} else {
							ElMessage.error(res.message);
						}
					});
				}
			});
		};

		return {
			formRef,
			openWindows,
			onCancel,
			onSubmit,
			lazyLoadDeptTree,
			...toRefs(state),
		};
	},
};
</script>

<style scoped>
.cropper-img {
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 100%;
}
</style>
